<template>
    <fieldset>
        <legend>商品</legend>
        <h1>商品:Product</h1>
        <ul>
            <li v-for="item in productData" :key="item.id">
                <b>
                    产品名称:{{item.title}}
                </b>
                ------
                <b>
                    价格:{{item.price}}
                </b>
                ------
                <b>
                    库存:{{item.inventory}}
                </b>
                <button :disabled="item.inventory===0" @click="addCart(item)">+加入购物车</button>
            </li>
        </ul>
    </fieldset>
</template>
<script>
//需求:

//1.请求服务器，在Product组件里面渲染数据

// - 封装请求的方法

// - 请求放到vuex的action里面

// - vuex需要模块化，并且添加mutations

//2.点击产品后面的按钮，需要将产品添加到购物车

//3.相同的数据添加到购物车之后，需要让购物车的数量加1 产品的库存-1

//4.总价计算
import { mapActions,mapState } from 'vuex';
//引入axios
import axios from "axios"
    export default{
        methods:{
            addCart(current){
                //current 点击按钮选中的这条数据
                console.log(current)
                this.ADD_CART(current)
                this.$store.commit('product/DECREASE_INVENTORY')
            },
            ...mapActions('product',['FETCH_PRODUCT']),
            ...mapActions('cart',['ADD_CART'])
        },
        computed:{
            ...mapState('product',['productData'])
        },
        mounted(){
            this.FETCH_PRODUCT()
        },
        created(){
            //发送一个get请求
            axios.get("/api/data/index.json",{
                //get请求的配置
                //请求头
                headers:{},
                //传送的参数
                params:{
                    name:'roy'
                },
            })
            .then(res=>{
                console.log(res)
            })





            //发送一个post请求

            //语法:axios.post('地址',{传递的参数},{请求的配置})

            // axios.post("/api/users/login",{
            //     username:"lbw",
            //     password:555,
            // },{
            //     //配置
            //     headers:{
            //         nickname:"abcd"
            //     }
            // })
            // .then(res=>{
            //     console.log(res)
            // })

            //配置模式config

            // axios({
            //     url:"/api/users/login",
            //     method:"post",         //请求方式
            //     // params:{},              //get请求的传参字段
            //     data:{
            //         username:"admin",
            //         password:"admin"
            //     },                //post请求的传参字段
            //     // headers:{},             //设置请求头
            //     timeout:3000,             //延时设置,请求3秒没有响应，直接进入catch
            //     withCredentials:true    //携带凭据(cookie)
            // })
            // .then(res=>{
            //     console.log(res)
            // })

        },
    }
</script>
